<template>
  <view class="windowStyle" v-if="show">
    <view
      :class="['windowBox', params.params.type === 2 ? 'on' : '']"
      @click="show = false"
    >
      <template v-if="params.params.type === 1">
        <view class="close" @click.stop="show = false">
          <image lazy-load :src="asyncImgs.home.close"></image>
        </view>
        <swiper
          class="swiper"
          :indicator-dots="true"
          :autoplay="false"
          :duration="500"
          indicator-active-color="#fff"
        >
          <swiper-item
            @click.stop="$utils.diySkip(item.link)"
            v-for="(item, index) in list"
            :key="index"
          >
            <image lazy-load mode="aspectFit" :src="item.picUrl"></image>
          </swiper-item>
        </swiper>
      </template>
      <template v-else>
        <view class="shopData" v-if="mdData">
          <view class="title">请确定门店</view>
          <view class="shopHd flexBox">
            <view class="shopLet flexBox">
              <i class="iconfont icon-a-map"></i>

              <view class="txt">
                <template v-if="address || mdData.address">
                  {{ address || mdData.address }}
                </template>
              </view>
            </view>

            <view
              class="shopRig flexBox"
              @click="$utils.toUrl('/pages/md/md-list')"
            >
              <i class="iconfont icon-dangqianweizhi"></i>
              <view class="txt">重新定位</view>
            </view>
          </view>

          <view @click="checkStore" class="active" v-if="mdData.id !== ''">
            <view class="activeTag">当前门店</view>
            <view class="activeName">{{ mdData.name }}</view>
            <view class="activeTxt activeAddress" v-if="mdData.address">
              {{ mdData.address }}
            </view>
            <view class="activeTxt activeTime" v-if="mdData.shop_time"
              >营业时间:{{ mdData.shop_time }}</view
            >
            <view
              class="activeTxt activeDistance flexBox"
              v-if="mdData.distance"
            >
              <i class="iconfont icon-a-map"></i>
              <view class="txt">{{ mdData.distance }}</view>
            </view>
          </view>
          <view v-else class="active">
            <view class="activeName">当前位置暂无可选门店</view>
            <view class="activeTxt activeAddress"> 不选择门店 </view>
          </view>
          <view class="btn" @click="checkStore">确认进入</view>
          <view
            v-if="false"
            class="select"
            @click="$utils.toUrl('/pages/md/md-list')"
          >
            <view class="txt"> 选择其他门店 </view>

            <i class="iconfont icon-arrow-right"></i>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: {
    params: {
      type: Object,
      default() {
        return null;
      }
    },

    controlList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      show: false,
      list: [],
      rule: "",
      window: {},
      mdData: null,
      address: ""
    };
  },
  computed: {
    ...mapGetters(["locationData"])
  },
  watch: {
    show(e) {
      this.$emit("changeShow", e);

      if (e) {
        this.initMdData();
      }
    }
  },
  methods: {
    initMdData() {
      let mdLocalData = uni.getStorageSync("storeMdData");
      if (mdLocalData) {
        this.mdData = JSON.parse(mdLocalData);
      } else {
        this.mdData = {
          id: "",
          name: this.stores.name,
          mobile: this.stores.mobile,
          cover_url: this.stores.web_log,
          pic_url: this.stores.store_share_logo, // logo
          shop_time: this.stores.shop_time || "",
          address: this.stores.address || "",
          distance: this.stores.distance || ""
        };
      }
    },
    // 门店是否营业
    isOpen(item) {
      if (item.open_status == 0) return false;
      if (item.shop_time_type == 0) return true;
      if (!item.start_time) return true;
      let date = new Date();
      let hour = date.getHours();
      let minutes = date.getMinutes();
      let [startBefore, startAfter] = item.start_time.split(":");
      let [endBefore, endAfter] = item.end_time.split(":");
      if (hour >= startBefore && hour < endBefore) {
        return true;
      }
      return false;
    },

    async init() {
      let longitude = "",
        latitude = "";
      if (this.locationData) {
        longitude = this.locationData.longitude;
        latitude = this.locationData.latitude;
      } else {
        // #ifdef H5
        const locationData = await this.$store.dispatch("getLocation");
        longitude = locationData.longitude;
        latitude = locationData.latitude;
        // #endif
      }

      let res = await this.$allrequest.diyNew.getLocationInfo({
        longitude,
        latitude
      });

      this.address = `${res.data.province}${res.data.city}${res.data.district}${res.data.street}${res.data.street_number}`;
      this.$allrequest.shop
        .getMdList({
          longitude,
          latitude
        })
        .then((res) => {
          if (!res.code) {
            let mdLocalData = uni.getStorageSync("storeMdData");
            if (res.data.list.length && !mdLocalData) {
              mdLocalData = JSON.stringify(res.data.list[0]);
            }
            if (mdLocalData && typeof mdLocalData === "string") {
              this.mdData = JSON.parse(mdLocalData);
            }
          }
        });

      this.controlList.forEach((item) => {
        if (item.show_type == "window") {
          this.list = item.params.list;
          this.rule = item.params.rule;
          this.window = item;
          let isFirst = uni.getStorageSync("isFirst");
          if (isFirst) {
            isFirst = 2;
            uni.setStorageSync("isFirst", 2);
          } else {
            isFirst = 1;
            uni.setStorageSync("isFirst", 1);
          }
          if (
            this.rule != "" &&
            this.rule == 1 &&
            isFirst == 1 &&
            item.is_show
          ) {
            this.show = true;
          }
          if (this.rule != "" && this.rule == 2 && item.is_show) {
            this.show = true;
          }
        }
      });
    },
    checkStore() {
      let storeMdData = uni.getStorageSync("storeMdData");
      if (storeMdData) {
        storeMdData = JSON.parse(storeMdData);
        if (storeMdData && this.mdData && storeMdData.id == this.mdData.id) {
          return;
        }
      }

      this.$store.commit("setStoreMdData", JSON.stringify(this.mdData));
      uni.reLaunch({ url: "/pages/home/home" });
    }
  },

  mounted() {
    this.init();
  }
};
</script>

<style lang="less" scoped>
.windowBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 123;
  padding: 400rpx 60rpx;
  box-sizing: border-box;
  &.on {
    display: flex;
    align-items: center;
  }

  .close {
    position: absolute;
    right: 40rpx;
    top: 200rpx;
    width: 60rpx;
    height: 60rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .swiper {
    height: 100%;
    width: 100%;
    swiper-item {
      width: 100%;
      height: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.shopData {
  padding: 24rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  flex: 1;
  width: 100%;

  .title {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #262626;
  }

  .btn {
    margin: 30rpx 0 44rpx;
    line-height: 76rpx;
    height: 76rpx;
    background: #f0250e;
    border-radius: 32px;
    font-size: 30rpx;
    color: #fff;
    text-align: center;
    font-weight: bold;
  }

  .select {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #262626;
  }
}

.flexBox {
  display: flex;
  align-items: center;

  .txt {
    flex: 1;
    margin-left: 5rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.shopHd {
  padding: 46rpx 0 24rpx;
  justify-content: space-between;
}

.shopLet {
  flex: 1;
  overflow: hidden;
  color: #262626;
  font-size: 26rpx;
  font-weight: bold;
  margin-right: 10rpx;
}

.shopRig {
  font-size: 24rpx;
  color: #f0250e;
}

.active {
  padding: 24rpx;
  border-radius: 20rpx;
  border: 2rpx solid #f0250e;
}

.activeTag {
  display: inline-block;
  margin-bottom: 14rpx;
  padding: 2rpx 10rpx;
  font-size: 24rpx;
  color: #f0250e;
  background: #fdf0f0;
}

.activeName {
  font-size: 28rpx;
  font-weight: bold;
  color: #262626;
}

.activeTxt {
  padding: 4rpx 0;
  font-size: 24rpx;
  color: #8c8c8c;
}

.activeDistance {
  .iconfont {
    font-size: 20rpx;
  }
}

.icon-a-map {
  font-size: 40rpx !important;
}

.icon-arrow-right {
  font-size: 22rpx;
}
</style>
